<template>
  <!--
  待审核页面（用户）
  -->
  <div class="table-classic-wrapper">
    <el-card shadow="always">

      <!-- 查询栏 -->
      <el-form
          ref="searchForm"
          :inline="true"
          :model="searchForm"
          label-width="90px"
          class="search-form"
      >

        <el-form-item>
          <el-input v-model="searchForm.telephone" placeholder="手机">
            <i slot="suffix" class="el-input__icon el-icon-search"
               @click="onSubmit()"></i>
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="danger" @click="fetchAllUserByPagination">获取全部用户</el-button>
        </el-form-item>
      </el-form>

      <!--
      selection-change：当选择项发生变化时会触发该事件
      -->
      <el-table
          ref="userTable"
          :data="userData"
          style="width: 100%;"
          :header-cell-style="{textAlign: 'center'}"
          @selection-change="handleSelectionChange"
          :cell-style="{textAlign: 'center'}"
          stripe
          class="table-inline-edit">

        <el-table-column type="selection" width="50"/>

        <el-table-column
            prop="id"
            label="编号"
            width="50">
        </el-table-column>

        <el-table-column
            prop="userName"
            label="姓名"
            width="100">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>姓名: {{ scope.row.userName }}</p>
              <p>手机: {{ scope.row.telephone }}</p>
              <p>邮箱: {{ scope.row.email }}</p>
              <p>城市: {{ scope.row.address }}</p>
              <p>性别: {{ scope.row.sex }}</p>
              <div slot="reference">
                <el-tag size="medium">{{ scope.row.userName }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>

        <el-table-column
            prop="telephone"
            label="手机号"
            width="150">
        </el-table-column>

        <el-table-column
            prop="email"
            label="邮箱"
            width="200">
        </el-table-column>

        <el-table-column
            prop="address"
            label="城市"
            width="100">
        </el-table-column>

        <el-table-column
            prop="sex"
            label="性别"
            width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.sex===0">男</span>
            <span v-if="scope.row.sex===1">女</span>
          </template>
        </el-table-column>

        <el-table-column
            prop="identity"
            label="申请身份"
            width="100">
          <template slot-scope="scope">
            <el-tag type="info" v-if="scope.row.identity===0">个人用户</el-tag>
            <el-tag type="primary" v-if="scope.row.identity===1">商家用户</el-tag>
            <el-tag type="danger" v-if="scope.row.identity===2">骑手</el-tag>
          </template>
        </el-table-column>

        <el-table-column
            prop="account"
            label="营业执照编号">
        </el-table-column>

        <el-table-column
            prop="auditRegistryState"
            label="注册状态"
            width="150">
          <template slot-scope="scope">
            <el-tag type="info" v-if="scope.row.auditRegistryState===0">注册未审核</el-tag>
            <el-tag type="success" v-if="scope.row.auditRegistryState===1">审核已通过</el-tag>
            <el-tag type="error" v-if="scope.row.auditRegistryState===2">审核未通过</el-tag>
          </template>
        </el-table-column>

        <el-table-column
            prop="enableState"
            label="用户状态"
            width="150">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.enableState===0">未禁用</el-tag>
            <el-tag type="danger" v-if="scope.row.enableState===1">已禁用</el-tag>
          </template>
        </el-table-column>

        <el-table-column
            label="操作"
            width="200">
          <template slot-scope="scope">
            <el-button size="mini" type="primary"
                       :disabled="scope.row.auditRegistryState===2"
                       @click="handleEdit(scope.row)">编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <Pagination :total="total" :page="currentPage" :limit="pageSize" @pagination="handlePageChange"></Pagination>

      <!--
      新增/编辑 弹出栏
      visible：是否显示 Dialog，支持.sync修饰符
      -->
      <el-dialog
          title="编辑"
          :visible.sync="formVisible"
          width="30%"
          class="dialog-form"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          :before-close="handleClose">
        <el-form
            ref="updateForm"
            :model="updateForm"
            label-width="100px">

          <div v-if="updateForm.originalAuditRegistryState===0">
            <el-form-item label="注册状态：" prop="auditRegistryState">
              <el-select v-model="updateForm.auditRegistryState" placeholder="请选择">
                <el-option :value="0" label="注册未审核" disabled/>
                <el-option :value="1" label="审核已通过"/>
                <el-option :value="2" label="审核未通过"/>
              </el-select>
            </el-form-item>
          </div>

          <div v-if="updateForm.auditRegistryState===1 || updateForm.originalAuditRegistryState===1">
            <el-form-item label="用户状态：" prop="enableState" placeholder="请选择">
              <el-select v-model="updateForm.enableState">
                <el-option :value="0" label="未禁用"/>
                <el-option :value="1" label="已禁用"/>
              </el-select>
            </el-form-item>
          </div>

          <div class="footer-item">
            <el-button @click="cancelForm">取 消</el-button>
            <el-button type="primary" @click="submitForm('updateForm')">确 定</el-button>
          </div>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {updateDefinedUser, getAllUserByPagination, getUserByIdAndTelephone} from "@/api/administration/user";
import Pagination from "@/component/pagination/Pagination";

export default {
  name: "AdministratorAuditUser",

  components: {Pagination},

  data() {
    return {
      /**
       * userData：存储注册用户的有关信息的数组
       */
      userData: [],

      /**
       * 查询列表
       */
      searchForm: {
        telephone: '',
      },

      /**
       * 编辑提交表单对象
       */
      updateForm: {
        id: undefined,
        originalAuditRegistryState: '',
        auditRegistryState: '',
        enableState: ''
      },

      /**
       * 数据总条数
       */
      total: 0,

      /**
       * currentPage：当前页面
       */
      currentPage: 0,

      /**
       * pageSize：页面大小
       */
      pageSize: 8,

      /**
       * 多选数据暂存数组
       */
      multipleSelection: [],

      /**
       * 新增/编辑 弹出框显示/隐藏
       */
      formVisible: false,
    }
  },
  methods: {

    /*
    * 多选操作，与multipleSelection相对应
    * 该功能在管理员页面没有实际作用
    */
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    /**
     * before-close：关闭前的回调，会暂停Dialog的关闭
     * 编辑弹出框，关闭时操作
     */
    handleClose() {
      this.formVisible = false;
      this.$refs.updateForm.resetFields();
    },

    /**
     * 编辑表单提交
     */
    submitForm(formName) {
      this.$refs[formName].validate(valid => {

        const formData = new FormData();
        formData.append("id", this.updateForm.id);

        if (valid) {
          if (this.updateForm.originalAuditRegistryState === 0 && this.updateForm.auditRegistryState === '' &&
              this.updateForm.enableState === '') {
            this.$message.warning("请选择注册状态");

          } else if (this.updateForm.originalAuditRegistryState === 0 && this.updateForm.auditRegistryState === '') {
            this.$message.warning("请选择注册状态");

          } else if (this.updateForm.auditRegistryState === 1 && this.updateForm.enableState === '') {
            this.$message.warning("请选择用户状态");

          } else if (this.updateForm.auditRegistryState === 2) {
            formData.append("auditRegistryState", this.updateForm.auditRegistryState);
            formData.append("enableState", '2');
            this.updateDefinedUser(formData);
            this.$message.success("更新成功");

          } else if (this.updateForm.auditRegistryState === 1) {
            formData.append("auditRegistryState", this.updateForm.auditRegistryState);
            formData.append("enableState", this.updateForm.enableState);
            this.updateDefinedUser(formData);
            this.$message.success("更新成功");

          } else if (this.updateForm.originalAuditRegistryState === 1) {
            formData.append("auditRegistryState", this.updateForm.originalAuditRegistryState);
            formData.append("enableState", this.updateForm.enableState);
            this.updateDefinedUser(formData);
            this.$message.success("更新成功");
          }

          this.formVisible = false

        }
      })
    },

    /*
     * 编辑表单取消提交
     */
    cancelForm() {
      this.$refs.updateForm.resetFields();
      this.formVisible = false;
    },

    /**
     * 打开编辑窗口
     */
    handleEdit(row) {
      this.formVisible = true;
      this.updateForm.id = row.id;
      this.updateForm.auditRegistryState = '';
      this.updateForm.originalAuditRegistryState = row.auditRegistryState;
      this.updateForm.enableState = '';
    },

    /**
     * 处理分页
     */
    handlePageChange(val) {
      this.currentPage = val.page;
      this.fetchAllUserByPagination();
    },

    /**
     * 页面初始化时获取全部用户（实现分页）
     */
    fetchAllUserByPagination() {

      const formData = new FormData();
      formData.append("currentPage", this.currentPage);
      formData.append("pageSize", this.pageSize);

      getAllUserByPagination(formData).then(res => {
        this.userData = res.message;
        this.total = res.total;
      }).catch(() => {
        this.$message({
          message: "error",
          type: "error"
        })
      })
    },

    /**
     * 修改指定用户的信息
     */
    updateDefinedUser(data) {
      updateDefinedUser(data).then(res => {
        if(res.information === 1){
          this.fetchAllUserByPagination()
        }
      }).catch(() => {
        this.$message({
          message: "error",
          type: "error"
        })
      })
    },

    /**
     * 根据telephone查询用户
     */
    onSubmit() {

      const data = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        telephone: this.searchForm.telephone
      };

      if (data.telephone === '') {
        this.$message.warning("请输入手机号之后进行查询");
        this.userData = [];
        this.total = 0;
      } else {
        getUserByIdAndTelephone(data).then(res => {
          if (res.message !== null) {
            this.userData = res.message;
            this.total = res.total;
          } else {
            this.userData = [];
          }
          this.total = res.total;
        }).catch(() => {
          this.$message({
            message: "error",
            type: "error"
          })
        })
      }
    },
  },

  created() {
    this.fetchAllUserByPagination();
  }

}
</script>

<style lang="less">
@import "../../../assets/less/aministration/card.less";
</style>
